<template>
  <ele-modal
    form
    :width="1200"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-page>
      <ele-card class="step-card">
        <div class="main">
          <div class="f">
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="120px"
            >
              <el-form-item label="借款本金" prop="amount">
                <el-input
                  v-model="form.amount"
                  style="width: 130px"
                  @input="setFirstPay"
                >
                  <!--<template #prepend>应收</template>-->
                  <template #append>元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="首付比例" prop="first_pay">
                <el-radio-group
                  v-model="form.first_pay_percent"
                  @change="setFirstPay"
                >
                  <el-radio-button :label="0.2">20%</el-radio-button>
                  <el-radio-button :label="0.3">30%</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="利率" prop="interest_rate">
                <el-input
                  v-model="form.interest_rate"
                  style="width: 130px"
                  @input="setFirstPay"
                >
                  <!--<template #prepend>应收</template>-->
                  <template #append>%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="手续费" prop="charge">
                <el-input
                  v-model="form.charge"
                  style="width: 130px"
                  @input="setFirstPay"
                >
                  <!--<template #prepend>应收</template>-->
                  <template #append>%</template>
                </el-input>
              </el-form-item>
              <el-form-item label="还款期数" prop="times">
                <el-input
                  v-model.number="form.times"
                  style="width: 130px"
                  @input="setFirstPay"
                >
                  <template #append>期</template>
                </el-input>
                <el-radio-group
                  v-model="times"
                  @change="quickSetTimes"
                  style="margin-left: 8px"
                >
                  <el-radio-button :label="3">3</el-radio-button>
                  <el-radio-button :label="6">6</el-radio-button>
                  <el-radio-button :label="9">9</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="首期还款日" prop="start_date">
                <el-date-picker
                  v-model="form.start_date"
                  type="date"
                  style="width: 130px"
                  value-format="YYYY-MM-DD"
                  @change="setFirstPay"
                />
              </el-form-item>
              <el-form-item label="还款人" prop="fenqi_grandfather">
                <el-input
                  v-model="form.fenqi_grandfather"
                  style="width: 130px"
                />
              </el-form-item>
              <el-form-item label="联系方式" prop="fenqi_grandfather_tel">
                <el-input
                  v-model="form.fenqi_grandfather_tel"
                  style="width: 130px"
                />
              </el-form-item>
              <el-form-item label="材料" prop="images">
                <image-upload :limit="10" v-model="form.images" />
              </el-form-item>
              <el-form-item
                v-if="props.data.status == 0 || props.data.status == 4"
              >
                <el-button type="primary" :loading="loading" @click="save">
                  保存
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div class="result">
              <div class="title">分期方案</div>
              <div class="item">
                <div class="t">分期金额</div>
                <div class="v">{{ form.amount }}</div>
                <div class="t">首付</div>
                <div class="v">{{ form.first_pay }}元</div>
              </div>
              <div class="item">
                <div class="t">还款期数</div>
                <div class="v">{{ form.times }}期</div>
                <div class="t">首期还款日</div>
                <div class="v">{{ form.start_date }}</div>
              </div>
              <div class="item">
                <div class="t">总计还款</div>
                <div class="v">{{ total }}元</div>
                <div class="t">手续费</div>
                <div class="v">{{ form.charge_amount }}</div>
              </div>
              <div class="title2">还款明细</div>
              <div class="th">
                <div class="qishu">期数</div>
                <div class="tit">还款日</div>
                <div class="val">还款金额</div>
              </div>
              <div class="tb" v-for="item in repayList" :key="item.id">
                <div class="qishu">{{ item.times }}</div>
                <div class="tit">{{ item.deadline }}</div>
                <div class="val"
                  >{{ item.amount_total }}元({{ item.amount }})</div
                >
              </div>
            </div>
          </div>
        </div>
      </ele-card>
    </ele-page>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import {
    updateTradeInstallment,
    getInstallmentRepayList
  } from '@/api/company';
  import { EleMessage } from 'ele-admin-plus/es';
  import ImageUpload from '@/components/ImageUpload/index.vue';

  import { useFormData } from '@/utils/use-form-data';

  const emit = defineEmits(['done', 'update:modelValue']);
  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object,
    type: String
  });

  const title = ref('');

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单数据 */
  const [form, resetFields] = useFormData({
    id: 0,
    status: 0,
    amount: '', // 金额
    interest_rate: '1', // 利率
    charge: '3', // 手续费
    charge_amount: 0,
    start_date: '', // 首期还款日
    times: 3, // 期数
    first_pay_percent: 0.2, // 首付比例
    first_pay: '', // 期数
    images: '', // 分期材料
    fenqi_grandfather_tel: '', // 分期材料
    fenqi_grandfather: '' // 分期材料
  });

  const rules = reactive({
    amount: [
      {
        required: true,
        message: '请填写金额',
        type: 'string',
        trigger: 'blur'
      }
    ],
    interest_rate: [
      {
        required: true,
        message: '请填写利率',
        type: 'string',
        trigger: 'blur'
      }
    ],
    charge: [
      {
        required: true,
        message: '请填写手续费',
        type: 'string',
        trigger: 'blur'
      }
    ],
    times: [
      {
        required: true,
        message: '请填写还款期数',
        type: 'number',
        trigger: 'blur'
      }
    ],
    start_date: [
      {
        required: true,
        message: '请填写首期还款日',
        type: 'string',
        trigger: 'blur'
      }
    ],
    images: [
      {
        required: true,
        message: '请上传材料',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  /** 提交 */
  const save = () => {
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      var requestData = Object.assign({}, form);

      updateTradeInstallment(requestData)
        .then(() => {
          loading.value = false;
          EleMessage.success('操作成功');
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          console.log(e);
        });
    });
  };
  /** 快速设置返点 */
  const times = ref(0);
  const quickSetTimes = () => {
    form.times = times.value;
    setFirstPay();
  };

  /** 计算首付金额 */
  const setFirstPay = () => {
    let pay = form.amount * form.first_pay_percent;
    let chargeAmount = (form.amount * form.charge) / 100;
    console.log('手续费计算', chargeAmount);
    form.charge_amount = chargeAmount.toFixed(2);
    form.first_pay = pay.toFixed(2);
    getRepayList();
  };

  /** 计算分期方案 */
  const repayList = ref([]);
  const total = ref(0);
  const getRepayList = () => {
    if (form.amount > 0 && form.times > 0 && form.start_date != '') {
      getInstallmentRepayList(form)
        .then((res) => {
          loading.value = false;
          repayList.value = res.list;
          total.value = res.total;
        })
        .catch((e) => {
          loading.value = false;
          console.log(e);
        });
    }
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.data.plate_number + '分期信息录入';
        let d = props.data;
        form.id = d.id;
        if (d.fenqi_amount > 0) {
          form.status = d.status;
          form.amount = d.fenqi_amount;
          form.first_pay_percent = d.fenqi_first_pay_percent;
          form.first_pay = d.fenqi_first_pay;
          form.times = d.fenqi_times;
          form.start_date = d.fenqi_start_date;
          form.interest_rate = d.fenqi_interest_rate;
          form.charge = d.fenqi_charge;
          form.charge_amount = d.fenqi_charge_amount;
          form.images = d.fenqi_images;
          times.value = d.fenqi_times;
          getRepayList();
        }

        console.log(form.first_pay_percent, '是什么');
      } else {
        repayList.value = [];
        total.value = 0;
        resetFields();
        formRef.value?.clearValidate?.();
        console.log('关闭');
      }
    }
  );
</script>

<style scoped>
  .main {
    display: flex;
    justify-content: space-between;
  }
  .main .f {
    width: 500px;
  }
  .result {
    width: 596px;
    border: 1px solid #888;
    border-right: 0;
    border-bottom: 0;
  }
  .result .title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #888;
    border-right: 1px solid #888;
  }
  .result .title2 {
    text-align: center;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #888;
    border-right: 1px solid #888;
  }
  .result .item {
    line-height: 25px;
    display: flex;
  }
  .result .item div {
    padding: 8px 12px;
  }
  .result .item .t {
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    text-align: right;
    width: 100px;
  }
  .result .item .v {
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    width: 150px;
  }
  .result .th,
  .result .tb {
    display: flex;
  }
  .result .th .tit,
  .result .tb .tit,
  .result .th .qishu,
  .result .tb .qishu,
  .result .th .val,
  .result .tb .val {
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
  }
  .result .th .qishu {
    width: 80px;
    padding: 8px 12px;
    font-weight: bold;
  }
  .result .th .tit {
    width: 120px;
    padding: 8px 12px;
    font-weight: bold;
  }
  .result .th .val {
    padding: 8px 12px;
    width: 386px;
    font-weight: bold;
  }
  .result .tb .qishu {
    width: 80px;
    padding: 8px 12px;
  }
  .result .tb .tit {
    width: 120px;
    padding: 8px 12px;
  }
  .result .tb .val {
    padding: 8px 12px;
    width: 386px;
  }
</style>
